<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE重要内容slot练习</title>
	</head>
	<body>
		<div id="app">
			<!-- 大组件todo之下有其他的组件 -->
			<todo>
				<todo-title slot="todo-title" :title="title"></todo-title>
				<!-- 这里定义了一个name为todo-title的插槽，只能插对应的插槽 -->
				<!-- 并且绑定了一个title属性，值从data中拿 -->
				<todo-item slot="todo-item" v-for="item in itemList" :item="item"></todo-item>
				<!-- 这里比较特殊，绑定的属性值要是循环遍历出来的对象item，因此先循环，再绑定循环出来的item -->
			</todo>
		</div>




	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<!-- axios的导入 -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script type="text/javascript">
		Vue.component("todo", {
			template: `<div>\
						 <slot name="todo-title"></slot>\
							 <ul>\
								<slot name="todo-item"></slot>\
							</ul>\
						</div>`
		});
		Vue.component("todo-title", {
			props:["title"],
			template: `<div>{{title}}</div>`
		});

		Vue.component("todo-item", {
			props:["item"],
			template: `<li>{{item}}</li>`
		});
		var vm = new Vue({
			el: "#app",
			data:{
				title: "这个是标题",
				itemList: ["itemitem", "itemitem", "itemitem", "itemitem"]
			}
		});
	</script>
</html>
